<template>
	<div class="select-execution-action" v-loading="loading">
		<div class="trigger-action-application">
			<i class="trigger-action-application-icon iconfont" :class="state.currentNodeInfoFront.options.appLogo" v-if="state.currentNodeInfoFront.options.appLogo ? state.currentNodeInfoFront.options.appLogo.includes('icon') : ''"></i>
			<img class="trigger-action-application-icon iconfont" :src="state.currentNodeInfoFront.options.appLogo" v-else-if="state.currentNodeInfoFront.options.appLogo" />
			<div class="trigger-action-application-icon iconfont" v-else>
				<i>{{ state.currentNodeInfoFront.options.appName.substring(0, 2) }}</i>
			</div>
			<div class="trigger-action-application-right">
				<div class="trigger-action-application-name">
					{{ state.currentNodeInfoFront.options.appName }}
				</div>
				<div class="trigger-action-application-info">
					<span>执行动作：{{ state.currentNodeInfoFront.options.selectObjName }}</span>
					<el-button type="text" v-if="!state.currentNodeInfoFront.options.selectObjName">请选择</el-button>
				</div>
			</div>
		</div>
		<div class="select-kind" v-if="showModule">
			<div class="select-kind-title">
				{{ openModuleObj.moduleTitle }}
			</div>
			<el-select v-model="moduleId" placeholder="请选择" style="width: 100%;" filterable>
				<el-option v-for="item in openModuleObj.moduleList" :key="item.moduleId" :label="item.name" :value="item.moduleId">
				</el-option>
			</el-select>
		</div>
		<div class="select-object" v-if="moduleId && showModule">
			<div class="select-object-title">
				选择执行动作
			</div>
			<div class="select-object-content">
				<div 
					class="select-object-item" 
					:class="{ 'active' : i.apiId === state.currentNodeInfoFront.options.apiId }"
					v-for="i in ((openModuleObj.moduleList || []).find(i => i.moduleId == moduleId) || {selectObjList: []}).selectObjList" 
					:key="i.moduleId"
					@click="clickObject(i)" 
				>
					<div class="object-name">{{ i.name }}</div>
					<div class="object-info">{{ i.desc }}</div>
				</div>
				<!-- 附加组件 -->
				<div class="add-ons" v-if="additionalList && additionalList.length">
					<div class="add-ons-title">
						附加组件
					</div>
					<div 
						class="add-ons-item" 
						:class="{ 'active' : i.apiId === state.currentNodeInfoFront.options.apiId }"
						v-for="i in (additionalList || [])" 
						:key="i.moduleId"
						@click="clickObject(i)" 
					>
						<div class="add-ons-name">{{ i.name }}</div>
						<div class="add-ons-info">{{ i.desc }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="select-object" v-else-if="closeModuleObj && !showModule">
			<div class="select-object-title">
				选择执行动作
			</div>
			<div class="select-object-content">
				<div 
					class="select-object-item" 
					:class="{ 'active' : i.apiId === state.currentNodeInfoFront.options.apiId }"
					v-for="i in (closeModuleObj.selectObjList || [])" 
					:key="i.moduleId"
					@click="clickObject(i)" 
				>
					<div class="object-name">{{ i.name }}</div>
					<div class="object-info">{{ i.desc }}</div>
				</div>
				<!-- 附加组件 -->
				<div class="add-ons" v-if="additionalList && additionalList.length">
					<div class="add-ons-title">
						附加组件
					</div>
					<div 
						class="add-ons-item" 
						:class="{ 'active' : i.apiId === state.currentNodeInfoFront.options.apiId }"
						v-for="i in (additionalList || [])" 
						:key="i.moduleId"
						@click="clickObject(i)" 
					>
						<div class="add-ons-name">{{ i.name }}</div>
						<div class="add-ons-info">{{ i.desc }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getApiList } from '@src/modules/trigger/api/trigger.js'
import state from '@src/modules/trigger/view/setting/util/state.js'

export default {
	name: 'SelectExecutionAction',
	computed: {
		state() {
			return state;
		},
		additionalList() {
            if (this.showModule) {
                if (state.currentNodeInfoFront.options?.moduleId) {
                    return (this.openModuleObj.moduleList || []).find(i => i.moduleId == this.moduleId)?.additionalList;
                }
            } else {
                return this.closeModuleObj?.additionalList || [];
            }
        },
	},
	created() {
		this.loading = true;
		getApiList({
			appId: state.currentNodeInfoFront.options?.appId,
			direction: 'to',
		}).then(res => {
			if (res.status == 0) {
				const data = res.data;
				this.showModule = data.showModule;
				if (this.showModule) {
					this.openModuleObj = data.openModuleObj;
					this.moduleId = state.currentNodeInfoFront.options?.moduleId;
				} else {
					this.closeModuleObj = data.closeModuleObj;
				}
			} else {
				this.$message.error(res?.message);
			}
		}).catch(e => {
			console.log(e);
		}).finally(() => {
			this.loading = false;
		})
	},
	data() {
		return {
			moduleId: '', // 类型的id
			openModuleObj: { // 显示选择类型时的的对象
				moduleTitle: '', // 类型标题
				moduleList: null, // 类型列表
			},
			closeModuleObj: {}, // 不显示选择类型时的的对象
			showModule: false, // 是否可以选择类型
			loading: false,
		}
	},
	methods: {
		// 选择执行动作
        clickObject(item) {
			if (item.apiId == state.currentNodeInfoFront.options.apiId) {
                this.$emit('clickApi');
                return;
            }
			// 新增时特判一下，因为有可能有旧版的代码方式
			let fieldOptions = {};
			if (Object.keys(state.currentNodeInfoFront.options?.fieldOptions || {}).includes('convertCode')) {
				fieldOptions = { ...state.currentNodeInfoFront.options.fieldOptions };
				delete fieldOptions.insert;
			}
			let selectObjName;
			if (state.currentNodeInfoFront.options?.moduleId) {
				selectObjName = (this.openModuleObj.moduleList || []).find(i => i.moduleId === this.moduleId)?.name + '/' + item.name;
			} else {
				selectObjName = item.name;
			}
            this.$set(state.currentNodeInfoFront, 'options', {
                appId: state.currentNodeInfoFront.options.appId,
                appName: state.currentNodeInfoFront.options.appName,
                appLogo: state.currentNodeInfoFront.options.appLogo,
				moduleId: this.moduleId,
				apiAction: item.action,
                apiId: item.apiId,
                selectObjName: selectObjName,
            })
			if (Object.keys(fieldOptions).length > 0) {
				this.$set(state.currentNodeInfoFront, 'options', {
					...state.currentNodeInfoFront.options,
					fieldOptions,
				})
			}
            this.$emit('clickApi');
        },
	}
};
</script>

<style scoped lang="scss">
.active {
    border: 1px solid var(--color-primary-light-6) !important;
}
.select-execution-action {
	height: calc(100% - 72px);
	padding: 16px 24px;
	display: flex;
    flex-direction: column;

	.trigger-action-application {
		display: flex;
		align-items: center;
		padding: 8px 0;

		.trigger-action-application-icon {
			width: 40px;
			height: 40px;
			border-radius: 8px;
			font-size: 24px;
			background: var(--color-primary-light-1);
			color: var(--color-primary-light-6);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 8px;
			i {
				font-size: 12px;
				font-style: normal;
			}
		}

		.trigger-action-application-right {
			.trigger-action-application-name {
				font-size: 14px;
			}

			.trigger-action-application-info {
				font-size: 12px;
				color: #8c8c8c;
				::v-deep .el-button {
					font-size: 12px;
					padding: 0;
					cursor: default;
				}
			}
		}
	}
	.select-kind {
		margin-top: 16px;

		&-title {
			font-size: 14px;
			margin-bottom: 8px;
		}
	}

	.select-object {
		flex: 1;
		height: calc(100% - 140px);
		width: 100%;
		margin-top: 16px;

		&-title {
			font-size: 14px;
			margin-bottom: 8px;
		}

		&-content {
			height: calc(100% - 20px);
			overflow: auto;
		}

		&-item {
			margin-bottom: 16px;
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			padding: 8px 16px;
			cursor: pointer;

			.object-name {
				font-size: 14px;
				margin-bottom: 2px;
				height: 22px;
				line-height: 22px;
				font-weight: 500;
			}

			.object-info {
				font-size: 12px;
				height: 20px;
				line-height: 20px;
				color: #595959;
			}
		}

		&-item:hover {
			border-color: var(--color-primary-light-6);
		}
	}

	.add-ons {
		margin-top: 16px;

		&-title {
			height: 36px;
			background-color: #f5f8fa;
			border-left: 3px solid var(--color-primary-light-6);
			padding: 8px 12px;
			margin-bottom: 16px;
			font-size: 12px;
			font-weight: 500;
		}

		&-item {
			margin-bottom: 16px;
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			padding: 8px 16px;
			cursor: pointer;

			.add-ons-name {
				font-size: 14px;
				margin-bottom: 2px;
				height: 22px;
				line-height: 22px;
				font-weight: 500;
			}

			.add-ons-info {
				font-size: 12px;
				height: 20px;
				line-height: 20px;
				color: #595959;
			}
		}

		&-item:hover {
			border-color: var(--color-primary-light-6);
		}
	}
}
</style>
